<template>
  <div style="background: #fff; padding: 10px;">
    <div class="header">
      <div class="detail">
        <div class="left">
          <img src="../assets/image/1.png" class="img" />
        </div>
        <div class="right">
          <div>
            <div style="margin-bottom:10px">中文名:家庭医学全书</div>
            <div  style="margin-bottom:10px">拉丁名:Familiae Medicinae Libri</div>
            <div  style="margin-bottom:10px">英文名:Book of Family Medicine</div>
            <div  style="margin-bottom:10px">木材名称:家庭医学全书</div>
            <div  style="margin-bottom:10px">中文名:家庭医学全书</div>
          </div>
          <div style="margin-left: 300px">
        <div style="margin-bottom:10px">中文名:家庭医学全书</div>
            <div  style="margin-bottom:10px">拉丁名:Familiae Medicinae Libri</div>
            <div  style="margin-bottom:10px">英文名:Book of Family Medicine</div>
            <div  style="margin-bottom:10px">木材名称:家庭医学全书</div>
            <div  style="margin-bottom:10px">中文名:家庭医学全书</div>
          </div>
        </div>
      </div>

      <div class="detail-img">
        <img
          class="detail-img1"
          v-for="(item, index) in imglist"
          :key="index"
          :src="item.imgurl"
        />
      </div>
    </div>

    <div class="body">
      <div class="box">
        <div class="first-box">
          <img src="../assets/image/1.png" class="img1" />
          书本简介
        </div>
        <div class="second-box"></div>
      </div>
      <div class="centent">
        <p>{{ content }}</p>
      </div>
      <div class="box">
        <div class="first-box">
          <img src="../assets/image/1.png" class="img1" />
          书本简介
        </div>
        <div class="second-box"></div>
      </div>
      <div class="centent">
        <p>
          {{ content }}
        </p>
      </div>
      <div class="box">
        <div class="first-box">
          <img src="../assets/image/1.png" class="img1" />
          书本简介
        </div>
        <div class="second-box"></div>
      </div>
      <div class="centent">
        <p>
          {{ content }}
        </p>
      </div>
      <div class="box">
        <div class="first-box">
          <img src="../assets/image/1.png" class="img1" />
          书本目录
        </div>
        <div class="second-box"></div>
      </div>
      <div class="centent1">
        <div v-for="(item, index) in alink" :key="index">
          <div style="color: blue">{{ index + 1 }}、{{ item }}</div>
          <p style="text-indent: 2em">
            {{ content }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imglist: [
        { imgurl: require("../assets/image/2.png"), name: "3" },
        { imgurl: require("../assets/image/3.png"), name: "4" },
        { imgurl: require("../assets/image/5.png"), name: "5" },
      ],
      alink: [
        "你应该了解的保持健康的信息",
        "健康饮食",
        "每天吃 种水果和蔬菜",
        "阅读食品标签",
      ],
      content:
        "本书共包括六个方面的内容:部分介绍读者应该了解的保持健康的信息；第二部分介绍饮食、运动、健身、减肥、减压、安全的生活和替补医学；第三部分为急救技术和措施，并为如何照顾生病、残疾或处于术后恢复期的家人提供了详细的建议；第四部分是症状的自我诊断；第五部分是一生的健康指南；第六部分详细介绍人体各大系统疾病。",
    };
  },
};
</script>
<style scoped>
.header {
  /* border: 1px solid red; */
  width: 100%;
  /* height: 250px; */
}
.detail {
  width: 100%;
  height: 160px;
  display: flex;
}
.left {
  width: 300px;
}
.right {
  margin-left: 250px;
  width: 900px;
  display: flex;
}
.img {
  width: 100%;
  height: 100%;
}
.detail-img {
  margin-top: 20px;
  display: flex;
}
.detail-img1 {
  width: 150px;
  height: 80px;
  margin-right: 20px;
}
.body {
  /* border: 1px solid red; */
  margin-top: 20px;
}
.box {
  border-bottom: 1px solid #38709f;
  display: flex;
  position: relative;
  margin-bottom: 10px;
}

.first-box {
  width: 150px;
  height: 25px;
  background: #38709f;
  color: #fff;
  display: flex;
  align-items: center;
}
.second-box {
  width: 80px;
  height: 10px;
  background: #38709f;
  position: absolute;
  left: 150px;
  bottom: 0px;
}
.img1 {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  margin-right: 5px;
}
.centent {
  text-indent: 2em;
}
</style>